<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>学校食堂安全管理系统v1.0</title>

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="../dist/css/extendcss.css"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">欢迎登陆学校食堂安全管理系统v1.0</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" id="signupForm" method="post">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="用户名" id="username" name="username" type="text" autofocus="autofocus"/>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="密码" id="pwd" name="password" type="password" value=""/>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="remember" id="remember" type="checkbox">记住密码
                                    </label>
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <input type="submit" class="btn btn-lg btn-success btn-block" value="登录" />
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>
    <script src="../validate/dist/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../validate/dist/messages_cn.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	
		$.validator.setDefaults( {
			submitHandler: function () {
//				location.href="log.html";
				//点击登录之后的操作
				/*
				1. 获取表单数据
				2. 发送请求
				3. 接收后台数据，进行判断
				4. 页面跳转
				 * */
				var username = $("#username").val();
				var pwd = $("#pwd").val();
				var remember = $("#remember")[0].checked;
				//console.log(remember)
				/*
				 获取本地cookie,将表单中的值和cookie的值进行比对
				 如果本地值和用户输入值能够匹配，不用去发送请求-相反
				 
				 * 
				 * */
				var usercookie = document.cookie;
				//console.log(usercookie)
				if (usercookie.indexOf(username)>-1 && usercookie.indexOf(pwd)>-1) {
					alert("cookie登录成功...");
					location.href="userlist.html";
				}else{
					$.post("/login",{username,pwd,remember},function (data) {
						console.log(data)
						if (data == 0) {
							alert("请数据正确的用户名或密码")
						}else{
							alert("登录成功...");
							location.href="userlist.html";
						}
					})
				}
			}
		} );

		$( document ).ready( function () {
			$( "#signupForm" ).validate( {
				rules: {
					username: {
						required: true,
						minlength: 5
					},
					password: {
						required: true,
						minlength: 6
					}					
				},
				messages: {
					username: {
						required: "请输入用户名",
						minlength: "用户名至少5个字符"
					},
					password: {
						required: "请输入密码",
						minlength: "密码至少6个字符"
					}
				},
				errorElement: "em",
				errorPlacement: function ( error, element ) {
					// Add the `help-block` class to the error element
					error.addClass( "help-block" );

					if ( element.prop( "type" ) === "checkbox" ) {
						error.insertAfter( element.parent( "label" ) );
					} else {
						error.insertAfter( element );
					}
				},
				highlight: function ( element, errorClass, validClass ) {
					$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
				},
				unhighlight: function (element, errorClass, validClass) {
					$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
				}
			} );

		} );
	</script>

</body>

</html>
